<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.staticfile.org/vuex/3.6.2/vuex.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { mapState, mapGetters } = Vuex;
      var store = new Vuex.Store({
        state: {
          nums: [1, 2, 3, 4, 5, 6],
        },
        getters: {
          // 返回状态 相当于 计算属性
          odd: function (state) {
            return state.nums.filter((n) => n % 2);
          },

          // 返回函数相当于 methods（特殊） 读取值
          // greatThan: function (state) {
          //   return function (x) {
          //     return state.nums.filter((n) => n > x);
          //   };
          // },

          greatThan: (state) => (x) => state.nums.filter((n) => n > x),
        },
        // Mutation 需遵守 Vue 的响应规则
        // 1 初始化值
        // 2 数组 arr[2] = 'xxx'  arr.length = 2
        //   对象 obj.xx = 'yy'
        // arr.splice(2,1, newValue)
        // Vue.set(arr, 2, newValue) this.$set(arr, 2, newValue)

        mutations: {
          add(state) {
            state.nums.push(Math.ceil(Math.random() * 10));
          },
          // 第一个参数固定是 state  第二个参数就是载荷信息
          // 在大多数情况下，载荷应该是一个对象
          // addNum(state, n) {
          //   state.nums.push(n);
          // },
          //  >!!! store.commit('addNum', 10)

          addNum(state, payload) {
            state.nums.push(payload.n);
          },

          // commit 第一个参数是mutations名字  第二个参数是载荷信息
          // >!!! store.commit('addNum', {n:20})

          // commit带一个对象参数 {type: mutations名字, n:20 , m: 30}
          // >!!! store.commit({type: "addNum", n:20, m: 30})
        },
        // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
      });

      // store.commit('add')
      console.log(store.state.nums, store.getters.odd);

      console.log(store.getters.greatThan(2));
      console.log(store.getters.greatThan(4));

      new Vue({
        el: "#app",
        store,
        computed: {
          ...mapState(["nums"]),
          // odd: function () {
          //   return this.$store.getters.odd;
          // },
          // ...mapGetters(["odd"]),
          ...mapGetters({
            xxx: "odd",
          }),
        },
      });
    </script>
  </body>
</html>
